<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        #app{
            width:600px;
            height:10px auto;
         margin: auto;
        }
        .tb{
            border-collapse: collapse;
            width: 100%;
        }
        .tb th{
            background-color: #FF8C00;
            color: white;
        }
        .tb td,
        .tb th{
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }
        .add{
            padding:5px;
            border:1px solid black;
           margin-bottom: 10px;
        }
        .del li{
            list-style: none;
            padding: 10px;
        }
        .del{
            position:absolute;
            top:35%;
            left: 40%;
            width: 300px;
            border:1px solid rgba(0,0,0,0.2);
            transition: all 0.5s;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="add">
            编号：<input id="id" v-color v-focus type="text" v-model='id'>品牌名称：<input v-model="name" type="text">
            <button @click='add'>添加</button>
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌创立</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-if="list.length <= 0">
          <td colspan="4">
              没有品牌数据
          </td>
                </tr>
          <tr v-for="(item,key,index) in list" :key="index">
              <td>{{item.id}} </td>
              <td>{{item.name}}</td>
              <td>{{item.date | dateFrm("/")}}</td>
              <!-- 使用vue注册事件时，我们在dom元素中是看不到的 -->
              <td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
          </tr>
                
            </table>
        </div>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" 
        @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave">
        <div class="del" v-show="isshow">
            <ul>
                <li>您确定要删除数据吗?</li>
                <li>
                    <button @click="delById">确定</button>
                    <button @click="showClose">关闭</button>
                </li>
            </ul>
        </div>
    </transition>
    </div>
    <script>
        //使用全局过滤器(共有过滤器)
        Vue.filter("dateFrm",function(time,spliceStr){
            //return “2017-11-16”
            var date=new Date(time);
            //得到年月日
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            return year+spliceStr+month+spliceStr+day;

        });
        Vue.directive("focus",{
            inserted:function(el){
                //console.log(el);
                el.focus();
            }
        });
        Vue.directive("color",{
            inserted:function(el){
                el.style.color="red"
            }
        });
        var vm=new Vue({
           el:'#app',
           data:{
               delId:'',//用来将要删除数据的id进行保存
               isshow:false,
               id:0,
               name:'',
               list:[
                   {"id":1,"name":"灿星学习平台","date":Date()},
                   {"id":2,"name":"灿星学习平台1","date":Date()},
               ]
           },
           methods:{

               add:function(){
                   //将id和namepush到list数组中
                   this.list.push({"id":this.id,"name":this.name,"date":Date()})
               },
               del:function(id){
                   alert(id)
              this.isshow=true;
              //将id保存到delId里面
             // this.delId=id;
               },
               beforeEnter:function(el){
                   el.style.top="80%";
               },
               enter:function(el,done){
                   el.offsetHeight;
                   el.style.top="35%";
               },
               afterEnter:function(el){

               },
               beforeLeave:function(el){
                   el.style.top="35%";
               },
               leave:function(el,done){
                   el.offsetHeight;
                   el.style.top="80%";
                   setTimeout(function(){
                       done();
                   },500);
               },
               afterLeave:function(el){},

               showClose:function(el){
                   this.isshow=false;
               },
               delById:function(){
                   _this=this;
                   //根据DelId删除对应数据
                   var index=this.list.findIndex(function(item){
                       return item.id==_this.delId;
                   });
                   this.list.splice(index,1)
                   this.isshow=false;
               }
           }
        });
    </script>
</body>

</html>